<script setup lang="ts">
import { NCard, NForm, NFormItem, NInput, NInputNumber, NSelect } from 'naive-ui'
import type { FormRules } from 'naive-ui'
import { useDictStore } from '@/stores/dictStore'
import { useFlowStore } from '../flowStore'

const dictStore = useDictStore()
const flowStore = useFlowStore()

const formRules: FormRules = ({
    modelName: {
        required: true,
        message: '请输入流程名称',
        trigger: ['input']
    },
    modelGroup: {
        required: true,
        message: '请选择流程分组',
        trigger: ['input']
    }
})

</script>

<template>
    <div class="flame-container" style="justify-content: center">
        <n-card style="width: 600px" :content-style="{ overflowY: 'auto' }">
            <n-form ref="formRef" :model="flowStore.modelInfo" :rules="formRules" label-width="78px" size="large"
                require-mark-placement="left">
                <n-form-item label="流程名称" path="modelName">
                    <n-input v-model:value="flowStore.modelInfo.modelName" placeholder="请输入流程名称" clearable />
                </n-form-item>
                <n-form-item label="流程分组" path="modelGroup">
                    <n-select v-model:value="flowStore.modelInfo.modelGroup" :options="dictStore.dict('WORKFLOW_GROUP')"
                        placeholder="请输入流程分组" clearable />
                </n-form-item>
                <n-form-item label="排序" path="sort">
                    <n-input-number style="width:100%" v-model:value="flowStore.modelInfo.sort" placeholder="请输入排序"
                        clearable />
                </n-form-item>
            </n-form>
        </n-card>
    </div>
</template>

<style scoped></style>